<%@page import="com.nebula.common.Const"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<%
	int NUM = 0;
	int num = 0;
	int checkboxNum = 0;
	int id = 0;
 %>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="static/html5shiv.js"></script>
<script type="text/javascript" src="static/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui.admin/css/style.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/layer/2.4/skin/layer.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/magic-input.min.css" />
<!--[if IE 6]>
<script type="text/javascript" src="static/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>我的分享</title>
</head>
  
<body>
<input type="hidden" value="${fn:length(list)}" id="length">
<div class="page-container">
	<c:if test="${empty list}">
		<div class="empty-box">
			<div class="empty-bg"></div>
			<p class="empty-text">您还没有分享过文件／文件夹～</p>
		</div>
	</c:if>
	<c:if test="${!empty list}">
		<div class="mt-10">
			<span id="breadcrumb" class="nav-span">
				<span class="l">链接分享</span>
				<span class="r">已加载 ${fn:length(list)} 个</span>
			</span>
			<table class="table table-border table-bg table-hover table-sort table-responsive" >
				<thead id="t-head">
					<tr class="text-c">
						<th width="10"><input type="checkbox" class="mgc mgc-primary" id="selectAll" name="selectAll" onclick="CheckAll(this)"></th>
						<th class="text-l">分享文件</th>
						<th width="140">浏览次数</th>
						<th width="140">保存次数</th>
						<th width="140">下载次数</th>
						<th width="140">分享时间</th>
						<th width="140">失效时间</th>
					</tr>
				</thead>
				<tbody id="fileList">
					<c:forEach items="${list}" var="val">
						<tr class="text-c">
							<td>
								<input type="checkbox" class="mgc mgc-primary" id="checkbox_<%=checkboxNum++%>" name="shareFile" value="${val.id}" onclick="showSpan(this)">
							</td>
							<td class="text-l">
								<c:if test="${val.failureTime == '已失效' && val.title != '分享已过期'}">
									<c:if test="${val.type == 'public'}">
										<span id="showInfo_<%=NUM++%>" style="cursor:default;color: #148cf1" title="公开分享">
											<i class="Hui-iconfont" style="font-size: 20px">&#xe605;</i>
										</span>&nbsp;&nbsp;
										<span style="font-size: 16px;color: rgb(170,170,170);" title="${val.title}">
											<img alt="${val.title}" src="${val.icon}">
											&nbsp;&nbsp;<span style="cursor: default;">${val.title}</span>
										</span>
									</c:if>
									<c:if test="${val.type == 'private'}">
										<span id="showInfo_<%=NUM++%>" style="cursor: default;color: #148cf1" title="私密分享">
											<i class="Hui-iconfont" style="font-size: 20px">&#xe60e;</i>
										</span>&nbsp;&nbsp;
										<span style="font-size: 16px;color: rgb(170,170,170);" title="${val.title}">
											<img alt="${val.title}" src="${val.icon}">
											&nbsp;&nbsp;<span style="cursor: default;">${val.title}</span>
										</span>
									</c:if>
								</c:if>
								<c:if test="${val.failureTime != '已失效' || val.title == '分享已过期'}">
									<c:if test="${val.type == 'public'}">
										<span id="showInfo_<%=NUM++%>" style="cursor: pointer;color: #148cf1" title="公开分享" onclick="showInfo(this)">
											<i class="Hui-iconfont" style="font-size: 20px">&#xe605;</i>
										</span>&nbsp;&nbsp;
										<a style="font-size: 16px;" target="_blank" href="${val.link}" class="text-primary">
											<img alt="${val.title}" src="${val.icon}">
											&nbsp;&nbsp;<span>${val.title}</span>
										</a>
									</c:if>
									<c:if test="${val.type == 'private'}">
										<span id="showInfo_<%=NUM++%>" style="cursor: pointer;color: #148cf1" title="私密分享" onclick="showInfo(this)">
											<i class="Hui-iconfont" style="font-size: 20px">&#xe60e;</i>
										</span>&nbsp;&nbsp;
										<a style="font-size: 16px;" target="_blank" href="${val.link}" class="text-primary">
											<img alt="${val.title}" src="${val.icon}">
											&nbsp;&nbsp;<span>${val.title}</span>
										</a>
									</c:if>
								</c:if>
							</td>
							<td>${val.viewed}次</td>
							<td>${val.save_times}次</td>
							<td>${val.downloads}次</td>
							<td>${val.sharingTime}</td>
							<td>${val.failureTime}</td>
						</tr>
						<tr style="display: none;background-color: #f5f5f5;" id="info_<%=num++%>">
							<td></td>
							<td colspan="6">
								<span id="url">
									<c:if test="${val.type == 'public'}">
										链接:&nbsp;&nbsp;
										<a target="_blank" href="${val.link}">
											<span id="link_${val.id}"><%=Const.DOMAIN_NAME%>${val.link}</span>
										</a>
										分享类型:&nbsp;&nbsp;公开链接
									</c:if>
									<c:if test="${val.type == 'private'}">
										链接:&nbsp;&nbsp;
										<a target="_blank" href="${val.link}">
											<span id="link_${val.id}"><%=Const.DOMAIN_NAME%>${val.link}</span>
										</a>
										提取密码:&nbsp;&nbsp;<span id="key_${val.id}">${val.fileKey}</span>
									</c:if>
								</span>&nbsp;
								<a class="btn btn-secondary-outline radius" data-title="复制" id="copyUrl" href="javascript:;" onclick="copyUrl(this,${val.id})">
									<i class="Hui-iconfont">&#xe6ea;</i> 复制
								</a>
							</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
	</c:if>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath}/static/layer/2.4/layer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/h-ui.admin/js/H-ui.admin.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/clipboard.min.js"></script>
<script type="text/javascript">
function copyUrl(obj,id){
	var clipboard = new Clipboard("#copyUrl",{
		text : function(trigger){
			var url = $("#link_"+id).text(),
			key = $("#key_"+id).text(),
			content = "";
			if(key == "" || key == null){
				content = "链接：" + url;
			}else{
				content = "链接：" + url + "\n" + "密码：" + key;
			}
			return content;
		}
	});
	clipboard.on('success',function(){
		layer.msg("复制到剪切板了，粘贴给您的朋友吧。",{offset:'5px',icon:1});
	});
}

function CheckAll(obj){
	var allSel = document.getElementsByName("shareFile");
	if(obj.checked){
		for(i = 0;i < allSel.length;i++){
			allSel[i].checked = true;
		}
		$("#t-head").html("<tr><td width='10'><input class='mgc mgc-primary' type='checkbox' checked=true name='selectAll' onclick='CheckAll(this)'></td>"+
		"<td>已选中"+$("input[name=shareFile]:checked").size()+"个文件/文件夹&nbsp;&nbsp;&nbsp;&nbsp;"
		+"<a class='btn btn-secondary-outline radius' id='cancelShare' data-title='取消分享' href='javascript:;'><i class='Hui-iconfont'>&#xe6e2;</i> 取消分享</a></td><td width='140'></td><td width='140'></td>"+
		"<td width='140'></td><td width='140'></td><td width='140'></td></tr>")
		$(".text-c").attr("style","background-color: #f5f5f5")
	}else{
		for(i = 0;i < allSel.length;i++){
			allSel[i].checked = !allSel[i].checked;
		}
		$("#t-head").html("<tr class='text-c'>"+
					"<th width='10'><input class='mgc mgc-primary' type='checkbox' name='selectAll' onclick='CheckAll(this)'></th>"
					+"<th class='text-l'>分享文件</th>"
					+"<th width='140'>浏览次数</th>"
					+"<th width='140'>保存次数</th>"
					+"<th width='140'>下载次数</th>"
					+"<th width='140'>分享时间</th>"
					+"<th width='140'>失效时间</th>"
				+"</tr>")
		$(".text-c").removeAttr("style","background-color: #f5f5f5");
	}
}

function showSpan(obj){
	var Info = $(obj).attr("id").substr($(obj).attr("id").lastIndexOf("_")+1);
	
	if(obj.checked){
		$("#t-head").html("<tr><td width='10'><input class='mgc mgc-primary' type='checkbox' name='selectAll' onclick='CheckAll(this)'></td>"+
		"<td>已选中"+$("input[name=shareFile]:checked").size()+"个文件/文件夹&nbsp;&nbsp;&nbsp;&nbsp;"
		+"<a class='btn btn-secondary-outline radius' id='cancelShare' data-title='取消分享' href='javascript:;'><i class='Hui-iconfont'>&#xe6e2;</i> 取消分享</a></td><td width='140'></td><td width='140'></td>"+
		"<td width='140'></td><td width='140'></td><td width='140'></td></tr>")
		$(obj).parent().parent().attr("style","background-color: #f5f5f5");
	}else if($("input[name=fileOrFolder]:checked").size() == 0){
		$("#group-span").hide();
		$("#t-head").html("<tr class='text-c'>"+
				"<th width='10'><input class='mgc mgc-primary' type='checkbox' name='selectAll' onclick='CheckAll(this)'></th>"
				+"<th class='text-l'>分享文件</th>"
				+"<th width='140'>浏览次数</th>"
				+"<th width='140'>保存次数</th>"
				+"<th width='140'>下载次数</th>"
				+"<th width='140'>分享时间</th>"
				+"<th width='140'>失效时间</th>"
				+"</tr>")
		$(obj).parent().parent().removeAttr("style");
		$("#info_"+Info).hide();
	}else{
		$("#t-head").html("<tr><td><input class='mgc mgc-primary' type='checkbox' name='checkAll' onclick='CheckAll(this)'></td>"+
		"<td>已选中"+$("input[name=fileOrFolder]:checked").size()+"个文件/文件夹</td><td width='120'></td><td width='240'></td></tr>")
		$(obj).parent().parent().removeAttr("style");
	}
	
	if($("input[name=shareFile]:checked").size() == $("#length").val()){
		$("input[name=selectAll]")[0].checked = true;
	}
	
	if($("input[name=shareFile]:checked").size() > 1){
		for(i = 0,len = $("#length").val();i < len;i++){
			$("#info_"+i).hide();
		}
	}
}

function showInfo(obj){
	var Info = $(obj).attr("id").substr($(obj).attr("id").lastIndexOf("_")+1);
	
	if($(obj).parent().parent().next().css("display") == "none"){
		if($(obj).parent().prev().find("input[name=shareFile]")[0].checked 
			&& $("input[name=shareFile]:checked").size() === 1){
			$(obj).parent().prev().find("input[name=shareFile]")[0].checked = false;
			$("#t-head").html("<tr class='text-c'>"+
				"<th width='10'><input class='mgc mgc-primary' type='checkbox' name='selectAll' onclick='CheckAll(this)'></th>"
				+"<th class='text-l'>分享文件</th>"
				+"<th width='140'>浏览次数</th>"
				+"<th width='140'>保存次数</th>"
				+"<th width='140'>下载次数</th>"
				+"<th width='140'>分享时间</th>"
				+"<th width='140'>失效时间</th>"
				+"</tr>")
			$(obj).parent().parent().removeAttr("style");
		}else{
			if($("input[name=selectAll]")[0].checked){
				$("input[name=selectAll]")[0].checked = false;
			}
			$("#info_"+Info).show();
			$("#t-head").html("<tr><td width='10'><input class='mgc mgc-primary' type='checkbox' name='selectAll' onclick='CheckAll(this)'></td>"+
			"<td>已选中1个文件/文件夹&nbsp;&nbsp;&nbsp;&nbsp;"
			+"<a class='btn btn-secondary-outline radius' id='cancelShare' data-title='取消分享' href='javascript:;'><i class='Hui-iconfont'>&#xe6e2;</i> 取消分享</a></td><td width='140'></td><td width='140'></td>"+
			"<td width='140'></td><td width='140'></td><td width='140'></td></tr>")
			$(obj).parent().parent().attr("style","background-color: #f5f5f5");
			$(obj).parent().prev().find("input[name=shareFile]")[0].checked = true;
		}
	}else{
		$("#info_"+Info).hide();
		$("#t-head").html("<tr class='text-c'>"+
			"<th width='10'><input class='mgc mgc-primary' type='checkbox' name='selectAll' onclick='CheckAll(this)'></th>"
			+"<th class='text-l'>分享文件</th>"
			+"<th width='140'>浏览次数</th>"
			+"<th width='140'>保存次数</th>"
				+"<th width='140'>下载次数</th>"
			+"<th width='140'>分享时间</th>"
			+"<th width='140'>失效时间</th>"
			+"</tr>")
		$(obj).parent().prev().find("input[name=shareFile]")[0].checked = false;
		$(obj).parent().parent().removeAttr("style")
	}
	
	for(i = 0,len = $("#length").val();i < len;i++){
		if(i != Info){
			$("#info_"+i).hide();
			$("#checkbox_"+i)[0].checked = false;
			$("#showInfo_"+i).parent().parent().removeAttr("style");
		}
	}
}

$("#t-head").on("click","a",function(event){
	var valArr = [];
	$("input[name=shareFile]:checked").each(function(i){
	 	valArr[i] = $(this).val();
	})
	layer.confirm("<div style='text-align: center;padding: 30px 22px 22px'>取消分享后，该条分享记录将被删除，好友将无法再访问此分享链接。你确认要取消分享吗？</div>",{title:"确认取消分享",area: ['520px','230px']},function(index){
		var i;
		$.ajax({
			type : "post",
			url : "/nebula/share/cancelShareByIdGroup.action",
			data : {
				groupId : function(){
					return valArr;
				}
			},
			dataType : "json",
			beforeSend: function () {  
				i = layer.msg('正在取消分享,请稍后...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: '0px', time:100000}) ;  
			},
			success : function(data){
				layer.close(i);
				layer.msg(data.msg,{offset:'5px',time:1000,icon:1},function(){
					location.reload();
				});
			}
		});
		layer.close(index);
	});
})
</script>
</body>
</html>
